<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:composition template="/shared/_layout.xhtml">
        <ui:define name="title">
            <h:outputText value="#{lang._account_index_title}"/>
        </ui:define>
        <ui:define name="css">
            <h:outputStylesheet name="form.css" library="css" />
        </ui:define>
        <ui:define name="content">
            <f:event listener="#{account.isLogged()}" type="preRenderView" />
            <article>
                <h1>
                    <h:outputText value="#{lang._account_index_connection}"/>
                </h1>
                <section>
                    <h2>
                        <h:outputText value="#{lang._account_index_have_account}"/>
                    </h2>
                    <h:form>
                        <p>
                            <h:messages errorClass="errorMessage" infoClass="infoMessage" 
                                        warnClass="warnMessage"/>
                        </p>
                        <p>
                            <h:outputLabel for="login" value="#{lang._account_index_username}"/>
                            <h:inputText id="login" label="#{lang._account_index_username}"
                                         required="true" value="#{account.user.username}" 
                                         maxlength="45" size="35">
                                <f:validateLength minimum="3" maximum="45"/>
                            </h:inputText>
                        </p>
                        <p>
                            <h:outputLabel for="password" value="#{lang._account_index_password}"/>
                            <h:inputSecret id="password" label="#{lang._account_index_password}" 
                                           required="true" value="#{account.user.password}" 
                                           maxlength="45" size="36">
                                <f:validateLength minimum="3" maximum="45"/>
                            </h:inputSecret>
                        </p>
                        <p>
                            <h:commandButton action="#{account.login()}" value="#{lang._account_index_login}"/>
                        </p>
                    </h:form>
                </section>
                <section>
                    <h2>
                        <h:outputText value="#{lang._account_index_not_have_account}"/>
                    </h2>
                    <p>
                        <h:outputText value="#{lang._account_index_new_client}"/>
                        <h:link outcome="registration/index" value="#{lang._account_index_register_now}"/>
                    </p>
                </section>
            </article>
        </ui:define>
    </ui:composition>
</html>